<!--  -->
<template>
    <!-- <dv-loading v-if="IsLoading == 1">{{ $t('pcbaBigScreen.loading')  }}</dv-loading> -->
    <scale-screen width="1920" height="1080" :delay="500" :fullScreen="false" :boxStyle="{
        background: '#03050C',
        overflow: isScale ? 'hidden' : 'auto',
    }" :wrapperStyle="wrapperStyle" :autoScale="isScale">
        <starBackground></starBackground>
        <div class="content_wrap">
            <Headers title="PCBA互联网设备可视化平台" />
            <div class="index-box">
                <div class="contetn_left">
                    <ItemWrap class="contetn_left-top contetn_lr-item" title="产能统计">
                        <LeftTop />
                    </ItemWrap>
                    <ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">
                        <LeftCenter />
                    </ItemWrap>
                    <ItemWrap class="contetn_left_bottom contetn_lr-item" title="设备提醒"
                        style="padding: 0 10px 16px 10px">
                        <LeftBottom />
                    </ItemWrap>
                </div>
                <div class="contetn_center">
                    <CenterMap class="contetn_center_top" title="设备运行中心" />
                    <ItemWrap style="margin:45px 0px 0px 0px; "  class="contetn_center-bottom" title="良率统计">
                        <CenterBottom />
                    </ItemWrap>
                </div>
                <div class="contetn_right">
                    <ItemWrap class="contetn_lr-item" title="报警次数">
                        <RightTop />
                    </ItemWrap>
                    <ItemWrap class="contetn_left-bottom contetn_lr-item" title="报警排名(TOP8)"
                        style="padding: 0 10px 16px 10px">
                        <RightCenter />
                    </ItemWrap>
                    <ItemWrap class="contetn_left-bottom contetn_lr-item" title="数据统计图 ">
                        <RightBottom />
                    </ItemWrap>
                </div>
            </div>
        </div>
    </scale-screen>
    <Setting />
</template>

<script setup>
import starBackground from '@/views/components/starBackground.vue'
import Headers from "../components2/header/header.vue";
import Setting from "../components2/setting/setting.vue";
import ScaleScreen from "../components2/scale-screen";
import ItemWrap from "../components2/item-wrap";
import LeftTop from "../components2/screen-demo/left-top";
import LeftCenter from "../components2/screen-demo/left-center";
import LeftBottom from "../components2/screen-demo/left-bottom";
import CenterMap from "../components2/screen-demo/center-map";
import CenterBottom from "../components2/screen-demo/center-bottom";
import RightTop from "../components2/screen-demo/right-top";
import RightCenter from "../components2/screen-demo/right-center";
import RightBottom from "../components2/screen-demo/right-bottom";
import { useBigScreenSettingStore } from "@/store/modules/bigscreensetting";

const settingStore = useBigScreenSettingStore();
const { isScale } = storeToRefs(settingStore);
const wrapperStyle = {};

const { proxy } = getCurrentInstance()
const SR = proxy.signalr.SR

const IsLoading = ref(1)

onMounted(() => {
    setTimeout(() => {
        IsLoading.value = 0;
    }, 999);
})

</script>


<style lang="scss" scoped>

.beautify-scroll-def {
    overflow-y: auto;

    &::-webkit-scrollbar-thumb {
        //滚动条的设置
        background-color: rgba(14, 59, 150, 0);
        background-clip: padding-box;
        border-radius: 4px;
    }

    &:hover {
        &::-webkit-scrollbar-thumb {
            //滚动条的设置
            background-color: rgba(14, 59, 150, 0.5);
            background-clip: padding-box;
            border-radius: 4px;
        }
    }

    &::-webkit-scrollbar-track-piece {
        //滚动条凹槽的颜色，还可以设置边框属性
        background-color: transparent;
    }

    &::-webkit-scrollbar {
        //滚动条的宽度
        width: 8px;
        height: 8px;
    }



    &::-webkit-scrollbar-thumb:hover {
        background-color: rgba(14, 59, 150, .8);
    }
}

.text-content {
    width: 100%;
    display: flex;
    min-height: calc(100% - 60px);
    justify-content: space-between;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
}

.content_wrap {
    width: 100%;
    height: 100%;
    padding: 16px 16px 16px 16px;
    box-sizing: border-box;
    background-image: url("@/assets/images/pageBg.png");
    background-size: cover;
    background-position: center center;
    color: #d3d6dd;
}
</style>


<style scoped>
.index-box {
    width: 100%;
    display: flex;
    min-height: calc(100% - 64px);
    justify-content: space-between;
}

.contetn_left,
.contetn_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    width: 540px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.contetn_center {
    flex: 1;
    margin: 0 54px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .contetn_center-bottom {
        height: 315px;
    }
}

.contetn_lr-item {
    height: 310px;
}
</style>